<template>
	<div class="modal">
		<Modal v-model="data.isShow" width="800" :mask-closable="false" :styles="{top: '20px'}">
			<p slot="header" class="header-view">开厅</p>
			<div class="main-view">
				<div class="left-view">
					<Form ref="formValidate" :model="data.data" :rules="ruleValidate" :label-width="100">
						<FormItem label="影厅：">
							<p>{{data.row.name}}</p>
						</FormItem>
						<FormItem label="会员卡号：" prop="cardNo">
							<div style="display: flex;">
								<Input v-model="data.data.cardNo" class="input"  placeholder="请刷卡"></Input>
								<Button type="primary" class="btn" @click="clickSearchMember">查询</Button>
							</div>
						</FormItem>
						<FormItem label="手机号：" prop="phoneNum">
							<div style="display: flex;">
								<Input v-model="data.data.phoneNum" :maxlength="11" class="input"  placeholder="请输入手机号"></Input>
								<Button type="primary" class="btn" @click="clickMemVertify" v-text="verText" :disabled="disabled" v-if="!memberData.isCard"></Button>
							</div>
						</FormItem>
						<FormItem label="验证短信：" prop="vcode" v-if="isVcodeShow">
							<div style="display: flex;">
								<Input v-model="data.data.vcode" class="input" placeholder="请输入验证码"></Input>
								<Button type="primary" class="btn" @click="clickVertify">验证</Button>
							</div>
						</FormItem>
						<FormItem label="姓名：" prop="name">
							<Input v-model="data.data.name" class="input" placeholder="请输入姓名"></Input>
						</FormItem>
						<FormItem label="会员卡：" prop="cardNo" v-if="memberData.isCardShow">
							<Select v-model="data.data.cardNo" placeholder="请选择会员卡">
								<Option v-for="item in memberData.list" :value="item.cardNo" :key="item.cardNo">{{ item.cardNo }}</Option>
							</Select>
						</FormItem>
						<FormItem label="实到人数：" prop="number">
							<InputNumber :min="1" v-model="data.data.number"></InputNumber>
						</FormItem>
						<FormItem label="计费方式：" prop="type">
							<RadioGroup v-model="data.data.type">
								<Radio label="1">
									<span>时段计费</span>
								</Radio>
								<!-- <Radio label="2">
									<span>固定收费</span>
								</Radio> -->
							</RadioGroup>
						</FormItem>
						<FormItem label="开厅时长：" prop="hours">
							<InputNumber :min="1" v-model="data.data.hours"></InputNumber>小时
						</FormItem>
						<!-- <FormItem label="播放影片：" prop="movie">
							<Select v-model="data.data.movie" placeholder="请选择播放影片">
								<Option v-for="item in movieList" :value="item.value" :key="item.value">{{ item.label }}</Option>
							</Select>
						</FormItem> -->
							<Button type="primary" :loading="orderLoading" style="width:100%;" @click="orderSubmit">确认信息</Button>
					</Form>
				</div>
				<div class="right-view">
					<div class="statistics">
						<XPriceView :data="orderPriceData"></XPriceView>
					</div>
					<div class="pay-view">
						<XPaywayView
							:data="payWayData" :isMember="isMemberData" :orderPrice="orderPriceData.money">
						</XPaywayView>
					</div>
				</div>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="data.isLoading" @click="clickSubmit">开厅</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
		
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import mAccountService from '@/network/service/mAccountService.js'
import XPaywayView from '@/components/XPaywayView'
import XPriceView from '@/components/XPriceView'
import $ from 'jquery'
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
export default {
	components: {XPriceView,XPaywayView},
	props: ['data'],
	data() {
		return {
			orderLoading: false,
			isOpen: false,
			isVcodeShow: false,
			verText: '会员验证',
			disabled: false,
			memberData: {
				name: '',
				list: [],
				isCard: false,
				isCardShow: false,
			},
			isMemberData: {
				isMember: false,
				isGiveCredit: '',
				creditLine: '',
				mstatus: null
			},
			movieList: [],
			ruleValidate: {
				vcode: [
					{ required: true, message: '请输入验证码', trigger: 'blur' }
				],
				number: [
					{ required: true, message: '请输入实到人数', trigger: 'blur', type: 'number' }
				],
				hours: [
					{ required: true, message: '请输入开厅时长', trigger: 'blur', type: 'number' }
				],
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				],
				phoneNum: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: phoneReg, message: '请正确输入手机号', trigger: 'blur' }
				],
				type: [
					{ required: true, message: '请选择计费方式', trigger: 'change' }
				],
			},
			orderPriceData: {},
			payWayData: {
				payWay: '2',
				isHand: '',
				password: ''
			},
		}
	},
	mounted() {
		
	},
	methods: {
		clickSearchMember() {
			this.getUserInfoByCard();
		},
		clickMemVertify() {
			this.getUserInfoByTel();
		},
		clickVertify() {
			this.vertifyVCode();
		},
		orderSubmit() {
			this.$refs['formValidate'].validate((valid) => {
				if (valid) {
					this.createOrder();
				} else {
					this.$Message.error('表单验证失败!');
				}
			})
		},
		clickSubmit () {
			let params = {
				id: this.orderPriceData.oid,
				payWay: this.payWayData.payWay,
				isHand: 0
			}
			if (this.payWayData.payWay == 2) {
				params.getMoney = this.orderPriceData.money
			} else if (this.payWayData.payWay == 8) {
				params.isHand = this.payWayData.isHand;
				params.handRoomId = this.data.row.rid
			} else if (this.payWayData.payWay == 1) {
				params.password = this.payWayData.password
			} else {
				params.getMoney = '';
			}
			this.$emit('on-submit', params, this.data);
		},
		
		
		getUserInfoByCard() {
			roomService.getUserInfoByCard(this.data.data.cardNo).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.data.data.name = result.data.name;
					this.data.data.phoneNum = result.data.phoneNum;
					this.data.data.memberId = result.data.uid;
					this.isMemberData.isMember = true;
					this.isMemberData.isGiveCredit = result.data.isGiveCredit;
					this.isMemberData.creditLine = result.data.creditLine;
					this.isMemberData.mstatus = result.data.mstatus;
					this.memberData.isCard = true;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		getUserInfoByTel() {
			roomService.getUserInfoByTel(this.data.data.phoneNum).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					console.log(result.data);
					this.isVcodeShow = true;
					this.memberData.name = result.data.name;
					this.memberData.list = result.data.cardList;
					this.data.data.memberId = result.data.uid;
					this.isMemberData.isMember = true;
					this.isMemberData.isGiveCredit = result.data.isGiveCredit;
					this.isMemberData.creditLine = result.data.creditLine;
					this.isMemberData.mstatus = result.data.mstatus;
					this.sendVCode();
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		sendVCode() {
			let params = {
				phone: this.data.data.phoneNum,
				type : 2
			}
			mAccountService.sendVCode(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.$Message.success('验证码发送成功');
					this.disabled = true;
					let num = 59;
					let timer;
					this.verText = num + '秒'
					timer = setInterval(() => {
						num--;
						if (num == 0) {
							num = 59;
							this.disabled = false;
							clearInterval(timer);
							this.verText = '会员验证';
						} else {
							this.verText = num + '秒'
						}
					}, 1000)
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		vertifyVCode() {
			let params = {
				phone: this.data.data.phoneNum,
				type : 2,
				vcode: this.data.data.vcode
			}
			mAccountService.vertifyVCode(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.data.data.name = this.memberData.name;
					this.isCardShow = true;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		createOrder() {
			let params = {
				id: this.data.row.rid,
				phoneNum: this.data.data.phoneNum,
				name: this.data.data.name,
				isMember: this.data.data.memberId == null? 0 : 1,
				memberId: this.data.data.memberId,
				cardNo: this.data.data.cardNo,
				number: this.data.data.number,
				isBook: 0,
				bookNo: '',
				hours: this.data.data.hours,
				movie: this.data.data.movie
			};
			this.orderLoading = true;
			roomService.createOrder(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.orderLoading = false;
					this.orderPriceData = result.data;
				} else {
					this.orderLoading = false;
					this.$Message.error(resmsg);
				}
			}, error => {
				this.orderLoading = false;
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
	}
}	
</script>

<style scoped lang="less">
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
	display: flex;
	// height: 8.2rem;
	.left-view {
		color: #433E41;
		border-right: .01rem solid #D5CED2;
		width: 50%;
		height: 100%;
		padding-right: .2rem;
		.td {
			width: 1rem;
			text-align: right;
		}
		.input {
			border: 1px solid #D5CED2;
			border-radius: 5px;
		}
		.btn {
			width: 1.8rem;
			margin-left: .1rem;
		}
	}
	.right-view {
		width: 50%;
		padding-left: .2rem;
		.statistics {
			margin-bottom: .3rem;
		}
	}
}

</style>